<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/orders' }">订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单区域 -->
    <el-form :model="orderForm" label-width="80px" ref="orderFormRef" :rules='editFormRules' :label-position="labelPosition">
      <el-form-item label="订单编号">
        <el-input v-model="orderForm.order_number" disabled></el-input>
      </el-form-item>
      <!--  <el-form-item label="是否发货">
        <p style="font-size:15px">1表示发货,0表示不发货</p>
        <el-input v-model="orderForm.is_send"></el-input>
      </el-form-item> -->
      <el-form-item label="支付状态（0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡）" prop='order_pay'>
        <el-input v-model="orderForm.order_pay" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单价格（元）" prop='order_price'>
        <el-input v-model="orderForm.order_price" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="edit">修改订单</el-button>
    <el-button type="info" @click="reset">订单重置</el-button>
  </div>
</template>

<script>
export default {
  name: 'updateOrders-test',
  data() {
    //验证支付状态的规则(自定义规则)
    let checkPay = (rule, value, callback) => {
      // 验证支付状态编号的正则表达式
      const regPay = /^0|1|2|3$/
      if (regPay.test(value)) {
        return callback()
      } else {
        callback(new Error('输入的编号只能为0,1,2,3'))
      }
    }
    //验证支付状态的规则(自定义规则)
    let checkPrice = (rule, value, callback) => {
      // 验证支付状态编号的正则表达式
      const regPrice = /(^[1-9][0-9]{0,7}$)|(^((0\.0[1-9]$)|(^0\.[1-9]\d?)$)|(^[1-9][0-9]{0,7}\.\d{1,2})$)/
      if (regPrice.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入整数或小数价格,小数点前保留8位,小数点后保留2位,且不可为0'))
      }
    }
    return {
      // 传递过来的商品id
      id: this.$route.params.id,
      // 修改订单的表单数据对象
      orderForm: {
        //is_send: '',
        order_number: '',
        order_pay: 0,
        order_price: 0,
        //pay_status: ''
      },
      labelPosition:'top',
      editFormRules: {
        order_pay: [
          { required: true, message: '支付状态不能为空！0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡', trigger: 'blur' },
          { validator: checkPay, trigger: 'blur' }
        ],
        order_price: [
          { required: true, message: '订单价格不能为空！', trigger: 'blur' },
          { validator: checkPrice, trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    this.getOrderInfo()
  },
  methods: {
    // 获得订单信息
    async getOrderInfo() {
      const { data: res } = await this.$http.get('orders/' + this.id)
      if (res.meta.status !== 200) {
        this.$message.error('获取订单信息失败！')
      }
      this.orderForm = res.data
      console.log(this.orderForm)
    },
    // 修改订单
    async edit() {
      const { data: res } = await this.$http.put('orders/' + this.id, this.orderForm)
      if (res.meta.status !== 201) {
        return this.$message.error('修改订单失败!')
      }
      this.$message.success('修改订单成功!')
      this.$router.push('/orders')
    },
    //重置
    reset(){
      this.$refs.orderFormRef.resetFields()
    }
  }
}
</script>

<style less="lang" scoped>
</style>

